<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <title>部门职员信息</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <script src="../../lib/axios.min.js"></script>
    <script src="../../lib/vue.min.js"></script>
    <link rel="stylesheet" href="../../library/element-ui/lib/theme-chalk/index.css">
    <script src="../../library/element-ui/lib/index.js"></script>
    <script src="./departmentPeople.js" defer></script><!-- 使用 defer 确保在 DOM 加载后执行 -->

    <style>
        el-container {
            display: flex; /* 使用 Flexbox 布局 */
            width: 100%; /* 容器宽度 */
            height: 100vh; /* 容器高度 */
            margin: 0; /* 设置容器的 margin 为 0 */
            padding: 0; /* 设置容器的 padding 为 0 */
        }
        .table-3 {
            width: auto; /* 设置宽度为30% */
            /*height: 600px; !* 设置高度为100% *!*/
            height: 750px;
            margin: 0; /* 设置 margin 为 0 */
            padding: 20px; /* 设置 padding 为 0 */
            border: 1px solid #ccc; /* 设置边框为 1px 实线，颜色为浅灰色 */
            display: flex;
            flex-direction: column; /* 垂直排列内容 */
        }
        .table-container {
            flex: 1; /* 设置为剩余空间 */
            margin: 0; /* 设置 margin 为 0 */
            padding: 0; /* 设置 padding 为 0 */
            border: 1px solid #ccc; /* 设置边框为 1px 实线，颜色为浅灰色 */
            /*height: 200px;*/
        }
        .tree-container {
            /*flex: 1; !* 占满剩余空间 *!*/
            overflow: hidden; /* 允许滚动 */
            margin-top: 20px;
        }
        .button-container {
            display: flex; /* 使用 Flexbox 布局 */
            justify-content: flex-end; /* 将内容推到右侧 */
            margin-bottom: 10px; /* 按钮与输入框之间的间距 */
        }
        .input-container {
            display: flex;
            align-items: center; /* 垂直居中 */
            margin-bottom: 10px; /* 输入框和按钮之间的间距 */

        }
        .table-container {
            height: calc(100% - 52px); /* 减去输入框和按钮的高度 */
            overflow: hidden; /* 允许滚动 */
        }
        .main-right{
            margin: 0 0 0 20px; /* 上、右、下为 0，左为 20px */
            padding: 0;
        }

    </style>
</head>

<body>
<div id="app">

    <el-container>
        <el-header>
            Header
            <hr>
        </el-header>

        <el-container>
            <el-aside width="20%">
                <!-- 第一个表格 -->
                <div class="table-3">
                    <div class="button-container">
                        <el-button type="primary" @click="handleButtonClick1();">添加部门</el-button>
                    </div>
                    <el-input placeholder="请输入内容" style="margin-top: 10px;"></el-input>
                    <div class="tree-container">
                        <el-tree
                                ref="tree"
                                :data="treeData"
                                node-key="id"
                                :default-expand-all="false"
                                :expand-on-click-node="false"
                                :show-checkbox="false"
                                 @node-click="handleNodeClick">  <!--节点点击事件-->
                            <template slot-scope="{ node }">
                                <span>{{ node.label }}</span>
                            </template>
                        </el-tree>
                    </div>
                </div>
            </el-aside>

            <!-- 主内容 -->
            <el-main class="main-right">
                <div class="input-container">
                    <el-input placeholder="请输入内容" style="width: 200px; margin-right: 10px;"></el-input>
                    <el-button type="primary" @click="handleButtonClick">搜索</el-button>
                </div>

                <div class="table-container">
                    <el-table :data="tableData" tooltip-effect="dark" style="width: 100%">
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column label="日期" width="120"><template slot-scope="scope">{{ scope.row.startDate}}</template></el-table-column>
                        <el-table-column prop="consumerName" label="姓名" width="120"></el-table-column>
                        <el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column>
                    </el-table>
                    <div class="block">
                        <span class="demonstration">页数较少时的效果</span>
                        <el-pagination
                                layout="prev, pager, next"
                                :total="50">
                        </el-pagination>
                    </div>

                </div>

            </el-main>
        </el-container>

    </el-container>

</div>

</body>
</html>
<!--    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> &lt;!&ndash; 引入 Element UI 样式 &ndash;&gt;-->

<!--    <script src="https://unpkg.com/element-ui/lib/index.js"></script> &lt;!&ndash; 引入 Element UI JS &ndash;&gt;-->

<!--    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>-->